<template>

    <MyModal ref="myModal" title="订单详情" :top="35">
        <template #content>
            <div class="row">
                <div class="left">
                    <div class="image">
                        <img :src="info?.filmImg" style="width:150px;" />
                    </div>
                    <div class="c-content">
                        <div class="left-item marginTop">
                            <span class="left-key">订单号:</span>
                            <span class="left-value">{{ info?.orderNumber }}</span>
                        </div>
                        <div class="left-item marginTop">
                            <span class="left-key">影院名称:</span>
                            <span class="left-value">{{ info?.cinemaName }}</span>
                        </div>
                        <div class="left-item marginTop">
                            <span class="left-key">影院地址:</span>
                            <span class="left-value">{{ info?.cinemaAddress }}</span>
                        </div>
                        <div class="left-item marginTop">
                            <span class="left-key">电影名称:</span>
                            <span class="left-value">{{ info?.filmName }}</span>
                        </div>
                        <div class="left-item marginTop">
                            <span class="left-key">开场时间:</span>
                            <span class="left-value"><a>{{ timeFormat(info?.showTime) }}</a></span>
                        </div>
                        <div class="left-item marginTop">
                            <span class="left-key">座位信息:</span>
                            <span class="left-value">
                                <!-- <a-tag color="blue" v-for="item in info?.seatList" :key="item.id">
                                    {{ item.seatName }}
                                </a-tag> -->
                                <a-tag color="blue" v-if="info?.seatNos" v-for="item in info?.seatNos.split(',') "
                                    :key="item">
                                    {{ item }}
                                </a-tag>
                            </span>
                        </div>
                    </div>

                </div>
                <div class="right">

                    <div class="right-item marginTop">
                        <span class="right-key">原价:</span>
                        <!-- <span class="right-value">￥{{ (info?.price / 100).toFixed(2) }}</span> -->
                        <span class="right-value">￥{{ (info?.submitPrice / 100).toFixed(2) }}</span>
                    </div>
                    <div class="right-item marginTop">
                        <span class="right-key">票数:</span>
                        <span class="right-value">{{ info?.seatCount }}</span>
                    </div>
                    <div class="right-item marginTop">
                        <span class="right-key">订单状态:</span>
                        <span class="right-value"> <a-tag v-if="info.orderStatus == 2" color="cyan">已提交</a-tag>
                            <a-tag v-if="info.orderStatus == 1" color="blue">已创建</a-tag>
                            <a-tag v-if="info.orderStatus == 3" color="blue">出票中</a-tag>
                            <a-tag v-if="info.orderStatus == 10" color="green">出票成功</a-tag>
                            <a-tag v-if="info.orderStatus == 20" color="red">出票失败</a-tag></span>
                    </div>

                    <div class="right-item marginTop">
                        <span class="right-key">结算状态:</span>
                        <span class="right-value"> <a-tag v-if="info.settleStatus == 1" color="blue">已结算</a-tag>
                            <a-tag v-if="info.settleStatus == 0" color="red">未结算</a-tag></span>
                    </div>
                </div>


            </div>
            <div class="vote-box" v-if="info?.ticketList">
                <div class="vote-item" v-for="(row, index) in info?.ticketList" @click="shwoImgge(row)" :key="index"
                    v-if="info?.ticketList.length">
                    <img alt="test" :src="row.ticket" style="width:150px;" />
                    <div class="content">
                        <div>
                            <span>取票码:</span>
                            <span style="margin-left: 10px; cursor: pointer"><a-tag color="blue"
                                    v-if="row.ticketCode">{{
                                    row.ticketCode }}</a-tag></span>
                        </div>
                        <div>
                            <span>验证码:</span>
                            <span style="margin-left: 10px; cursor: pointer"><a-tag color="blue"
                                    v-if="row.validateCode">{{ row.validateCode }}</a-tag></span>
                        </div>
                    </div>
                </div>
            </div>


        </template>
    </MyModal>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { timeFormat } from '@/hooks/util'
import * as orderApi from '@/api/order'
const myModal = ref()
const info = ref({})
const id = ref("")

let robotId = ref<string>('')
const showModal = (record: any) => {
    myModal.value?.showModal()
    // id.value = record.id
    id.value = record.orderId
    getOrderDetailInfo()
    console.log(info.value, " info.value info.value");

}

const getOrderDetailInfo = async () => {
    try {
        const { state, message: msg, data } = await orderApi.orderDetailAdmin({ id: id.value })
        if (state == 200) {
            console.log(data, "datadata");

            info.value = data
        }

    } catch (e) {

        message.error('网络请求连接失败~')

    }
    // 

}
const shwoImgge = (row: any) => {

    emit('ImagePreview', [row])

}
const emit = defineEmits<{
    refresh: [],
    ImagePreview: []
}>()

defineExpose({
    showModal,
})

interface formState {
    code: string
}
const formState = ref<formState>({
    code: '',
})

const handleSubmit = async () => {
    let params = {
        code: formState.value.code,
        robotId: robotId.value,
    }
    try {
        // const { state, message: msg } = await accountApi.openCard(params)
        // if (state === 200) {
        message.success('激活成功')
        myModal.value?.cancelModal()
        emit('refresh')
        // } else {
        //     message.error(msg)
        // }
    } catch (error) {
        message.error('网络请求连接失败~')
    }
}
</script>
<style lang="less">
.row {
    display: flex;
    justify-content: space-between;

    .left {
        display: flex;

        .c-content {
            margin-left: 20px;
            font-size: 16px;

            .left-value {
                margin-left: 6px;
                color: #15181d;
            }

            .left-key {
                color: #858a99;
            }

            .marginTop {
                margin-top: 10px;
            }
        }

    }

    .right {
        font-size: 16px;

        .right-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;

            .right-value {
                margin-left: 6px;
                color: #15181d;
            }

            .right-key {
                color: #858a99;
            }
        }

        .marginTop {
            margin-top: 10px;
        }

    }

}

.vote-box {
    margin-top: 60px;
    display: flex;
    align-items: center;

    .vote-item {
        display: flex;
        flex-direction: column;

        .content {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        // align-items: center;
    }

    .vote-item:nth-child(n + 2) {
        margin-left: 30px;
    }
}
</style>